<template>
  <div class="toolbar">
    <div :class="{ toolFocus: select === 0, tool: select !== 0 }" class="avatar-section">
      <span class="el-dropdown-link">
        <el-badge
          is-dot
          :class="{
            'custom-badge-online': isOnline,
            'custom-badge-off': !isOnline,
          }"
        >
          <el-avatar
            class="avatar-display"
            shape="square"
            size="large"
            :src="avatar"
          ></el-avatar>
        </el-badge>
      </span>
    </div>

    <div
      @click="switchTool(1)"
      :class="{ toolFocus: select === 1, tool: select !== 1 }"
      class="chat-section"
    >
      <span class="el-icon-chat-line-round"></span>
    </div>
    <div
      @click="switchTool(2)"
      :class="{ toolFocus: select === 2, tool: select !== 2 }"
      class="contacts-section"
    >
      <span class="el-icon-user"></span>
    </div>
    <div @click="onDynamicClick" class="tool help-section">
      <span class="el-icon-help"></span>
    </div>
    <div class="toolbar-spacer"></div>

    <div @click="onSettingsClick" class="tool settings-section">
      <span class="el-icon-s-tools"></span>
    </div>
    <div
      @click="onLogoutClick"
      class="tool logout-section"
    >
      <span class="el-icon-switch-button"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    select: {
      type: Number,
      default: 1
    },
    isOnline: {
      type: Boolean,
      default: true
    },
    avatar: {
      type: String,
      default: require('@/assets/icon/default-avatar.svg').default
    }
  },
  methods: {
    switchTool(type) {
      this.$emit('switch-tool', type);
    },
    onDynamicClick() {
      this.$emit('open-dynamic');
    },
    onSettingsClick() {
      this.$emit('open-settings');
    },
    onLogoutClick() {
      this.$emit('logout');
    }
  }
};
</script>

<style scoped>
.toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 25px;
  min-width: 50px;
  background-color: #252525;
}

.toolbar-spacer {
  flex-grow: 1;
}

.toolbar .tool,
.toolFocus {
  font-size: 25px;
  cursor: pointer;
}

.toolbar .tool {
  color: #bfbfbf;
}

.toolbar .toolFocus {
  color: #0badf9;
}

.toolbar .tool:hover {
  color: #d8d8d8;
}

.toolbar .toolFocus:hover {
  color: #15c2ff;
}

/* 提取的内联样式 */
.avatar-section {
  margin-top: 40px;
}

.avatar-display {
  display: block;
}

.chat-section {
  margin-top: 50px;
}

.contacts-section {
  margin-top: 30px;
}

.help-section {
  margin-top: 30px;
}

.settings-section {
  margin-top: 30px;
}

.logout-section {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
